<template>
    <div>
           <!-- 头部导航 -->
            <div class="header">
                <div class="left iconfont icon-geren" @click="$router.push('/login').catch(()=>{})"></div>
                <div class="center">MUSIC-VUE</div>
                <router-link tag="div" class="right iconfont icon-fangdajing" to="/Search"></router-link>
                <!-- <div class="right iconfont icon-fangdajing" @click="toseek"></div> -->
            </div>
            <!-- 导航按钮 -->
            <div class="navs">
                <router-link tag="div" to="/recommend" class="item">
                    <span>推荐</span>
                </router-link>
                 <router-link tag="div" to="/rank" class="item">
                    <span>排行榜</span>
                </router-link> 
                <router-link tag="div" to="/singer" class="item">
                    <span>歌手</span>
                </router-link>

            </div>
    </div>
</template>

<script>
export default {
    data(){
        return{

        }
    },
    methods:{
      toseek(){
        // this.$router.push('/Search/Search.vue')
      }
    }
}
</script>

<style lang="less">
//头部导航
.header{
  background-color: #d44439;
  color:#fff;
  height: 39px;
  line-height: 39px;
  display: flex;
  text-align: center;
  .left,.right{
    flex: 0 0 40px;
    font-size: 18px;
  }
  .center{
    flex: 1;
  }
}
// 导航按钮
.navs{
  height: 40px;
  line-height: 40px;
  display: flex;
  background-color: #d44439;
  color: #fff;
  .item{
    flex:1;
    text-align: center;
    font-size: 14px;
    span{
      display:inline-block;
      height: 30px;
      border-bottom: 1px solid transparent;
    }
    &.router-link-active span{
      border-color: #fff;
      font-weight: bold;
    }
  }
}
</style>